<!--  -->
<template>
  <div class="login c-main-bg">
    <div class="user-info">
      <section class="section">
        <label for="user-name" class="c-main user-name">用戶名</label>
        <input type="text" name="user-name" v-model="userName" />
      </section>
      <section class="section">
        <label for="user-password" class="c-main user-password">密碼</label>
        <input type="password" name="user-password" v-model="userPwd" />
      </section>
      <section>
        <button class="login-btn c-main-bg" v-on:click="clickLogin">
          登录
        </button>
      </section>
    </div>
  </div>
</template>

<script>
import { getLogin } from "network/login";

export default {
  name: "Login",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      userName: "",
      userPwd: ""
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    clickLogin() {
      getLogin({
        userName: this.userName,
        userPwd: this.userPwd
      }).then(res => {
        console.log(res.data);
        if (res.data.code == 0) {
          console.log(this.$router);
          // 验证通过，跳转到home
          this.$router
            .push({
              name: "Home"
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          // 验证失败
          alert("账号或者密码错误");
        }
      });
      console.log(this.userName, this.userPwd);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/**@import url(); 引入公共css类**/
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.user-info {
  width: 350px;
  height: 200px;
  background-color: #fff;
  box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.section {
  line-height: 40px;
  display: flex;
  align-items: center;
}
.section label {
  display: inline-block;
  width: 4em;
  text-align: justify;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  margin-right: 5px;
}
.section label::after {
  content: ":";
  display: inline-block;
  width: 100%;
}
.section input {
  height: 30px;
  line-height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-indent: 0.3em;
}
.login-btn {
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 0;
  color: #fff;
  margin-top: 20px;
  border-radius: 5px;
}
button:hover,
button:visited,
button:active,
button:focus {
  border: none;
}
button,
input {
  outline: none;
}
</style>
